<template>
  <view class="order_detail">
    <view class="top">
      <view class="top_line">
        <text class="leixing">{{ orderDetail.status_name }}</text>
        <text class="kuaidi" v-if="express.length"
          >（{{ express[0].express_name }}）</text
        >
      </view>
      <!-- <view class="bottom_line">卖家已发货，03天24小时后将自动关闭</view> -->
      <view class="bottom_line">{{ orderDetail.status_desc }}</view>
    </view>
    <view class="message_box">
      <view class="message_top" v-if="express.length">
        <img src="./images/huoche.png" alt="" />
        <view class="right_box">
          <view class="dizhi" v-if="express[0].log[0]"
            >快件已到达{{ JSON.parse(express[0].log[0].content).arrive }}</view
          >
          <view v-if="express[0].log[0]" class="time">{{
            JSON.parse(express[0].log[0].content).time
          }}</view>
        </view>
      </view>
      <view class="xian" v-if="express.length"></view>
      <view class="message_bottom">
        <img src="./images/dizhi.png" alt="" />
        <view class="right_box">
          <view class="xinxi"
            >{{ orderDetail.consignee }} {{ orderDetail.phone }}</view
          >
          <view class="bottom_dizhi"
            >{{ orderDetail.province_name }}{{ orderDetail.city_name
            }}{{ orderDetail.area_name }}{{ orderDetail.address }}</view
          >
        </view>
      </view>
    </view>
    <view class="detail_box">
      <view
        class="center"
        v-for="(item, index) in orderDetail.item"
        :key="index"
      >
        <view class="img_box">
          <img :src="item.goods_image" alt="" />
        </view>
        <view class="right">
          <view class="right_top">
            <view class="lingpai">
              <img :src="levelImg[item.level_id]" alt="" class="img" />
            </view>
            <view class="title">
              <view class="top_title">{{ item.goods_title }}</view>
              <view class="xilie">{{ item.goods_type }}</view>
            </view>
          </view>
          <view class="right_bottom">
            <view class="jiage">
              <text class="fuhao">￥</text>
              <text class="price">{{ item.goods_price }}</text>
            </view>
            <view class="shu_box">
              <text class="fuhao">x</text>
              <text class="shuliang">{{ item.goods_num }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="price_box">
      <view class="line">
        <view class="left">商品总价</view>
        <view class="right">
          <text class="fuhao">¥</text>
          <text class="price">{{ orderDetail.goods_amount }}</text>
        </view>
      </view>
      <view class="line">
        <view class="left">运费</view>
        <view class="right">
          <text class="fuhao">+¥</text>
          <text class="price">{{ orderDetail.dispatch_amount }}</text>
        </view>
      </view>
      <view class="line">
        <view class="left">优惠券</view>
        <view class="right">
          <text class="fuhao">-¥</text>
          <text class="price">{{ orderDetail.discount_fee }}</text>
        </view>
      </view>
      <view class="line">
        <view class="left">实付款</view>
        <view class="right">
          <text class="red_fuhao">¥</text>
          <text class="red_price">{{ orderDetail.total_amount }}</text>
        </view>
      </view>
    </view>
    <view class="order_box">
      <view class="line">
        <view class="left">订单编号</view>
        <view class="right">{{ orderDetail.order_sn }}</view>
      </view>
      <view class="line">
        <view class="left">下单时间</view>
        <view class="right">{{ orderDetail.createtime }}</view>
      </view>
      <view class="line">
        <view class="left">付款时间</view>
        <view class="right">{{ orderDetail.paytime }}</view>
      </view>
      <view class="line">
        <view class="left">发货时间</view>
        <view class="right" v-if="express.length&&express[0].log[0]">{{
          express[0].log[0].changedate
        }}</view>
        <view class="right" v-else>暂无发货时间</view>
      </view>
      <view class="line">
        <view class="left">备注</view>
        <view class="right">{{ orderDetail.remark || '暂无备注信息' }}</view>
        <!-- <view class="right" v-else>暂无备注信息</view> -->
      </view>
    </view>
  </view>
</template>
<script>
import le1 from './images/le1.png';
import le2 from './images/le2.png';
import le3 from './images/le3.png';
import le4 from './images/le4.png';
import le5 from './images/le5.png';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',

  data: () => ({
    orderDetail: {},
    express: [],
    //通过ID控制令牌的底板颜色
    levelImg: {
      1: le1,
      2: le2,
      3: le3,
      4: le4,
      5: le5,
    },
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad() {},
  mounted() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getOrderDetail();
    this.onExpress();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    // 订单详情
    getOrderDetail() {
      this.$http('order.detail', {
        id: this.$Route.query.id,
      }).then((res) => {
        if (res.code === 1) {
          this.orderDetail = res.data;
          if (this.orderDetail.phone.length > 0) {
            this.orderDetail.phone =
              this.orderDetail.phone.substr(0, 3) +
              '****' +
              this.orderDetail.phone.substr(7);
          }
          this.orderDetail.createtime = this.$u.timeFormat(
            res.data.createtime,
            'yyyy-mm-dd hh:MM'
          );
          this.orderDetail.paytime = this.$u.timeFormat(
            res.data.paytime,
            'yyyy-mm-dd hh:MM'
          );
        }
      });
    },
    // 查看物流包裹
    onExpress(orderId, orderItemId) {
      this.$http('order.expressList', {
        order_id: this.$Route.query.id,
      }).then((res) => {
        if (res.code === 1) {
          this.express = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.order_detail {
  padding-bottom: 20rpx;
  .top {
    width: 750rpx;
    height: 200rpx;
    background-color: #a084f0;
    padding-left: 62rpx;
    padding-top: 42rpx;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    .top_line {
      .leixing {
        font-size: 40rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 700;
        color: #ffffff;
      }
      .kuaidi {
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .bottom_line {
      font-size: 22rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 18rpx;
    }
  }
  .message_box {
    width: 690rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: -30rpx;
    .message_top {
      width: 100%;
      height: 135rpx;
      display: flex;
      align-items: center;
      img {
        width: 57rpx;
        height: 57rpx;
        margin-left: 45rpx;
        margin-right: 28rpx;
      }
      .right_box {
        .dizhi {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #3d3d3d;
          line-height: 17rpx;
        }
        .time {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #939393;
          line-height: 17rpx;
          margin-top: 30rpx;
        }
      }
    }
    .xian {
      width: 544rpx;
      border-bottom: 1rpx solid #c0bec2;
      margin-left: 73rpx;
      opacity: 0.25;
    }
    .message_bottom {
      width: 100%;
      height: 135rpx;
      display: flex;
      align-items: center;
      img {
        width: 57rpx;
        height: 57rpx;
        margin-left: 45rpx;
        margin-right: 28rpx;
      }
      .right_box {
        .xinxi {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #3d3d3d;
          line-height: 17rpx;
        }
        .bottom_dizhi {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #939393;
          line-height: 17rpx;
          margin-top: 30rpx;
        }
      }
    }
  }
  .detail_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
    margin: 18rpx 30rpx;
    padding-right: 32rpx;
    padding-left: 38rpx;
    padding-bottom: 33rpx;
    .center {
      height: 180rpx;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #dadada;
      background-color: #fff;
      .img_box {
        width: 122rpx;
        height: 122rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .right {
        flex: 1;
        margin-left: 20rpx;
        .right_top {
          display: flex;
          .lingpai {
            position: relative;
            width: 35rpx;
            height: 49rpx;
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%) scale(0.96);
              width: 100%;
              height: 100%;
            }
            text {
              position: relative;
              z-index: 1;
              width: 100%;
              height: 100%;
              font-size: 18rpx;
              font-family: FZShaoEr-M11S-Regular, FZShaoEr-M11S;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 49rpx;
              display: block;
            }
          }
          .title {
            flex: 1;
            margin-left: 10rpx;
            .top_title {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 700;
              color: #111111;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 400rpx;
            }
            .xilie {
              font-size: 18rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #666666;
            }
          }
        }
        .right_bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 26rpx;
          .jiage {
            .fuhao {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #de3249;
            }
            .price {
              font-size: 28rpx;
              font-family: DIN-Bold;
              font-weight: 700;
              color: #de3249;
            }
          }
          .shu_box {
            display: flex;
            justify-content: flex-end;
            .fuhao {
              font-size: 20rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 400;
              color: #3d3d3d;
            }
            .shuliang {
              font-size: 24rpx;
              font-family: Oswald-Regular, Oswald;
              font-weight: 400;
              color: #3d3d3d;
            }
          }
        }
      }
    }
  }
  .price_box {
    width: 690rpx;
    height: 274rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 30rpx 18rpx;
    padding-top: 16rpx;
    padding-right: 28rpx;
    padding-left: 28rpx;
    .line {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right {
        .fuhao {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 350;
          color: #979797;
        }
        .price {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 700;
          color: #979797;
        }
        .red_fuhao {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 350;
          color: #de3249;
        }
        .red_price {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 700;
          color: #de3249;
        }
      }
    }
  }
  .order_box {
    width: 690rpx;
    height: 330rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 30rpx 10rpx;
    padding-top: 16rpx;
    padding-right: 28rpx;
    padding-left: 28rpx;
    .line {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right {
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #939393;
      }
    }
  }
}
</style>
